<template>
    <section>
        <!-- 工具条 -->
        <el-button type="text" @click="addFormVisible = true">添加用户</el-button>
        <!-- 用户列表 -->
        <div class="user-list">
            <el-table  ref="multipleTable" :data="userTable" tooltip-effect="dark" style="width: 100%"  @selection-change="handleSelectionChange">
                <el-table-column type="selection" width="55">
                </el-table-column>
                <el-table-column type="index" width="50">
                </el-table-column>
                <el-table-column prop="role" label="用户身份" width="180">
                </el-table-column>
                <el-table-column prop="name" label="用户名称" width="120"> 
                    <template slot-scope="scope">
                        <i class="el-icon-user"></i>
                        <router-link :to="'/user/details/' + scope.row.id ">{{scope.row.name}}</router-link>
                    </template>
                </el-table-column>
                <el-table-column prop="realName" label="真实姓名"  sortable width="180">
                </el-table-column>
                <el-table-column prop="sex" label="性别" sortable :formatter="transformSex" width="180">
                </el-table-column>
                <el-table-column prop="date" label="有效期" sortable width="180">
                </el-table-column>
                <el-table-column prop="state" label="状态" sortable width="180">
                </el-table-column>
                <el-table-column label="操作">
                    <template slot-scope="scope">
                        <el-button size="small" type="primary" @click="handleEdit(scope.$index, scope.row)" icon="el-icon-edit-outline"></el-button>
                        <el-button size="small" type="danger" @click="handleDelete(scope.$index, scope.row)" icon="el-icon-delete"></el-button>
                    </template>
                </el-table-column>
            </el-table>
            <div style="margin-top: 20px">
                <el-button @click="toggleSelection([tableData3[1], tableData3[2]])">切换第二、第三行的选中状态</el-button>
                <el-button @click="toggleSelection()">取消选择</el-button>
            </div>
        </div>

        <!-- 工具条 -->
        <div class="block">
            <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" 
            :current-page="currentPage4" :page-sizes="[20, 30, 40, 50]" layout="total, sizes, prev, pager, next, jumper" :total='total' style="float:right">
            </el-pagination>
        </div>

        <!-- 新增用户 -->
        <el-dialog title="新增用户" :visible.sync="addFormVisible">
            <el-form :model="addForm">
                 <el-form-item label="角色" :label-width="formLabelWidth">
                    <el-input v-model="addForm.role" auto-complete="off"></el-input>
                </el-form-item>
                  <el-form-item label="姓名" :label-width="formLabelWidth">
                    <el-input v-model="addForm.name" auto-complete="off"></el-input>
                </el-form-item>
                 <el-form-item label="真实姓名" :label-width="formLabelWidth">
                    <el-input v-model="addForm.realName" auto-complete="off"></el-input>
                </el-form-item>
                 <el-form-item label="性别" :label-width="formLabelWidth">
                    <el-input v-model="addForm.sex" auto-complete="off"></el-input>
                </el-form-item>
                <el-form-item label="日期" :label-width="formLabelWidth">
                    <el-input v-model="addForm.date" auto-complete="off"></el-input>
                </el-form-item>
                 <el-form-item label="状态" :label-width="formLabelWidth">
                    <el-input v-model="addForm.state" auto-complete="off"></el-input>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="addFormVisible = false">取 消</el-button>
                <el-button type="primary" @click="addFormVisible = false">确 定</el-button>
            </div>
        </el-dialog>

        <!-- 编辑用户 -->
        <el-dialog title="编辑用户" :visible.sync="editFormVisible">
            <el-form :model="editForm">
                <el-form-item label="角色" :label-width="formLabelWidth">
                    <el-input v-model="editForm.role" auto-complete="off"></el-input>
                </el-form-item>
                 <el-form-item label="用户名" :label-width="formLabelWidth">
                    <el-input v-model="editForm.name" auto-complete="off"></el-input>
                </el-form-item>
                 <el-form-item label="真实姓名" :label-width="formLabelWidth">
                    <el-input v-model="editForm.realName" auto-complete="off"></el-input>
                </el-form-item>
                 <el-form-item label="性别" :label-width="formLabelWidth">
                    <el-input v-model="editForm.sex='0'?'男':'女'"  auto-complete="off"></el-input>
                </el-form-item>
                <el-form-item label="日期" :label-width="formLabelWidth">
                    <el-input v-model="editForm.date" auto-complete="off"></el-input>
                </el-form-item>
                 <el-form-item label="状态" :label-width="formLabelWidth">
                    <el-input v-model="editForm.state" auto-complete="off"></el-input>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="addFormVisible = false">取 消</el-button>
                <el-button type="primary" @click="addFormVisible = false">确 定</el-button>
            </div>
        </el-dialog>
    </section>  
</template>

<script>
import {Dialog,Icon,Message,Pagination} from 'element-ui'
import { userService } from "@/api/userService";

export default {
data() {
      return {
        //用户列表数据
        userTable: [{
            role:'',
            name:'',
            realName:'',
            sex:'',
            date:'',
            state:''
        }],
        total:0,

        allSelect: [],//全选数组
        
        addFormVisible: false,//新增页面是否显示
        //新增用户表单数据
        addForm: {
            role:'',
            name:'',
            realName:'',
            sex:'',
            date:'',
            state:''
        },
        formLabelWidth: '120px',

        editFormVisible: false,//编辑页面是否显示
        //编辑用户表单数据
        editForm: {
            role:'',
            name:'',
            realName:'',
            sex:'',
            date:'',
            state:''
        },
        // 当前显示页码数
        currentPage4: 4

      }
    },
    methods: {
        //获取用户列表
        getUser(){
            userService.list().then((res)=>{
               if(res.status==200){
                   this.total=res.data.length;
                   this.userTable=res.data;
               }else{
                    Message.error('错了哦，这是一条错误消息');
               }
            });
        },
        //性别转换，绑定table 的格式转换函数
        transformSex(row, column, cellValue){
           return row.sex == 1 ? '男' : row.sex == 0 ? '女' : '未知';
        },
        toggleSelection(rows) {
            if (rows) {
            rows.forEach(row => {
                this.$refs.multipleTable.toggleRowSelection(row);
            });
            } else {
            this.$refs.multipleTable.clearSelection();
            }
        },
        handleSelectionChange(val) {
            this.allSelect = val;
        },
        // 分页获取当前每一页条数
        handleSizeChange(val) {
            console.log(`每页 ${val} 条`);
        },
        // 分页 获取当前是第几页
        handleCurrentChange(val) {
            console.log(`当前页: ${val}`);
        },

        // 编辑
        handleEdit(index,row){
            this.editFormVisible=true,//编辑页面是否显示
            this.editForm = Object.assign({}, row);
        }
    },
    mounted(){
      this.getUser()
    }
}
</script>

<style>

</style>
